<template>
	<view>
		<u-navbar title="设置" :autoBack="true" :bgColor="them_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff"></u-navbar>
		<form @submit="formSubmit">
			<view class='personal-data' :style="'margin-top:' + navH + 'px;'">
				<view class='list'>
					<view class='item'>
						<view>头像</view>
						<view>
							<shmily-drag-image v-model="imageList" :number="1"></shmily-drag-image>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>昵称</view>
						<view class='input'><input type='text' name='user_name' :value='userInfo.user_name'></input>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'>
						<view>手机号码</view>
						<navigator url="/pages/users/user_phone/index" hover-class="none" class="input"
							v-if="!userInfo.mobile_phone">
							点击绑定手机号<text class="iconfont icon-xiangyou"></text>
						</navigator>
						<view class='input acea-row row-between-wrapper' v-else>
							<input type='text' disabled='true' name='mobile_phone' :value='userInfo.mobile_phone'
								class='id'></input>
							<text class='iconfont icon-suozi'></text>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper" v-if="userInfo.mobile_phone">
						<view>账号安全</view>
						<navigator url="/pages/users/user_phone/index?type=1" hover-class="none" >
							<u-icon name="arrow-right"></u-icon>
						</navigator>
					</view>
					<view class="item acea-row row-between-wrapper" style="align-items: center;">
						<view>地址管理</view>
						<navigator url="/pages/users/user_address_list/index" hover-class="none">
							<u-icon name="arrow-right"></u-icon>
						</navigator>
					</view>
					<!-- 	<view class="item acea-row row-between-wrapper" v-if="userInfo.invioce_func">
						<view>{{$t(`发票管理`)}}</view>
						<navigator url="/pages/users/user_invoice_list/index" hover-class="none" class="input">
							{{$t(`点击前往`)}}<text class="iconfont icon-xiangyou"></text>
						</navigator>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>{{$t(`账号注销`)}}</view>
						<navigator url="/pages/users/user_cancellation/index" hover-class="none" class="input">
							{{$t(`注销后无法恢复`)}}<text class="iconfont icon-xiangyou"></text>
						</navigator>
					</view> -->
				</view>

				<button class='modifyBnt bg-color' formType="submit">保存修改</button>
				<!-- #ifdef H5 || APP-PLUS || MP -->
				<view class="logOut cartcolor acea-row row-center-wrapper" @click="outLogin">退出登录</view>
				<!-- #endif -->

			</view>
		</form>


	</view>
</template>

<script>
	import {
		userInfo,
		save_info
	} from '@/api/user';
	import {
		login_out
	} from '@/api/public';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import Cache from '@/utils/cache';
	import {
		BASE_URL
	} from '@/config/app'
	export default {
		data() {
			return {
				navH: '',
				them_color: getApp().globalData.theme_color,
				userInfo: {},
				userIndex: 0,

				isShowAuth: false, //是否隐藏授权
				canvasWidth: "",
				canvasHeight: "",
				canvasStatus: false,
				fileSizeString: '',
				version: '',
				array: [],
				setIndex: 0,

				imageList: [],
				img_url: BASE_URL,
				
				plus_show:true
			};
		},
		computed: mapGetters(['isLogin', 'app_token']),
		watch: {
			isLogin: {
				handler: function(newV, oldV) {
					if (newV) {
						this.getUserInfo();
					}
				},
				deep: true
			}
		},
		onLoad() {
			this.navH = getApp().globalData.navHeight / 2;
			if (this.isLogin) {
				this.getUserInfo();
			} else {
				toLogin();
			}
		},
		methods: {

			/**
			 * 退出登录
			 * 
			 */
			outLogin: function() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认退出登录',
					success: function(res) {
						if (res.confirm) {
							login_out({
								app_token: that.app_token
							}).then(res => {
								that.$store.commit("LOGOUT");
								// that.$socket.disconnect();
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}).catch(err => {});
						} else if (res.cancel) {}
					}
				});

			},
			/**
			 * 获取用户详情
			 */
			getUserInfo: function() {
				let that = this;
				userInfo({
					app_token: that.app_token
				}).then(res => {
					that.$set(that, 'userInfo', res.data);
					if(res.data.headimg != '' || res.data.headimg.indexOf('undefinded') != -1 ){
						that.imageList.push(res.data.headimg);
						that.plus_show = false
					}
				});
			},
	
			/**
			 * 提交修改
			 */
			formSubmit: function(e) {
				let that = this,
					value = e.detail.value;
				if (!value.user_name) return that.$util.Tips({
					title: '请输入姓名'
				});
				var data = {
					app_token: that.app_token,
					// address_id:'',//地址id 编辑时传
					user_name: value.user_name,
					birthday: 0,
					sex: 0,
					headimg: that.imageList[0],
					real_name: 0,
					card: '',
					face_card: '',
					back_card: '',
					country: 0,
					province: 0,
					city: 0,
					district: 0,
					address: '',
					supplier_id: getApp().globalData.supplier_id,
				}
				
				uni.request({
					url: BASE_URL + '/users/personal/save_info',
					data: data,
					method: 'POST',
					success: (res) => {
						that.$util.Tips({
							title: res.data.msg,
						}, {
							tab: 3
						})				
					}
				});
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.cartcolor {
		color: var(--view-theme);
		border: 1px solid var(--view-theme);
	}

	.personal-data .wrapper {
		margin: 10rpx 0;
		background-color: #fff;
		padding: 36rpx 30rpx 13rpx 30rpx;
	}

	.personal-data .wrapper .title {
		margin-bottom: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .wrapper .wrapList .item {
		width: 690rpx;
		height: 160rpx;
		background-color: #f8f8f8;
		border-radius: 20rpx;
		margin-bottom: 22rpx;
		padding: 0 30rpx;
		position: relative;
		border: 2rpx solid #f8f8f8;
		box-sizing: border-box;
	}

	.personal-data .wrapper .wrapList .item.on {
		border-color: #e93323;
		border-radius: 20rpx;
		background-image: url("");
		background-size: 100% 100%;
		background-color: #fff9f9;
		background-repeat: no-repeat;
	}

	.personal-data .wrapper .wrapList .item .picTxt {
		width: 445rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue {
		width: 96rpx;
		height: 96rpx;
		position: relative;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .wrapper .wrapList .item .picTxt .pictrue .alter {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text {
		width: 325rpx;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .name {
		width: 100%;
		font-size: 30rpx;
		color: #282828;
	}

	.personal-data .wrapper .wrapList .item .picTxt .text .phone {
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.personal-data .wrapper .wrapList .item .bnt {
		font-size: 24rpx;
		background-color: #fff;
		border-radius: 27rpx;
		width: 140rpx;
		height: 54rpx;
		border: 2rpx solid #e93323;
	}

	.personal-data .wrapper .wrapList .item .currentBnt {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 26rpx;
		background-color: rgba(233, 51, 35, 0.1);
		width: 140rpx;
		height: 48rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	.personal-data .list {
		margin-top: 15rpx;
		background-color: #fff;
	}

	.personal-data .list .item {
		padding: 30rpx 30rpx 30rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
		margin-left: 30rpx;
		font-size: 32rpx;
		color: #282828;
	}

	.personal-data .list .item .phone {
		width: 160rpx;
		height: 56rpx;
		font-size: 24rpx;
		color: #fff;
		line-height: 56rpx;
		border-radius: 32rpx
	}

	.personal-data .list .item .pictrue {
		width: 88rpx;
		height: 88rpx;
	}

	.personal-data .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.personal-data .list .item .input {
		width: 415rpx;
		text-align: right;
		color: #868686;
	}

	.personal-data .list .item .input .id {
		width: 365rpx;
	}

	.personal-data .list .item .input .iconfont {
		font-size: 35rpx;
	}

	.personal-data .modifyBnt {
		font-size: 32rpx;
		color: #fff;
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 76rpx auto 0 auto;
	}

	.personal-data .logOut {
		font-size: 32rpx;
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		border-radius: 45rpx;
		margin: 30rpx auto 0 auto;
	}



</style>
